<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { IModuleUserInfo } from "./data";
import { detailData, update, updateOwners, updateEmployees } from "./server";
import { ResultCodeEnum } from "@/enums/utils.request.enum";
import { ElMessage } from "element-plus";
import { IResponseData } from "@/@types/utils.request";
import type { UploadProps } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

const info = ref<IModuleUserInfo>({});
onMounted(() => {
	getInfo();
});

const getInfo = async () => {
	const response: IResponseData<IModuleUserInfo> = await detailData();
	const { code, data } = response;
	if (code == ResultCodeEnum.SUCCESS) {
		if (data != undefined) {
			info.value = data;
			userForm.username = info.value.username;
			userForm.password = info.value.password;
			userForm.realName = info.value.realName;
			userForm.phoneNumber = info.value.phoneNumber;
			userForm.email = info.value.email;
			userForm.gender = info.value.gender;
			userForm.imageUrl = info.value.imageUrl;

			if (checkRole("admin")) {
				userForm.adminId = info.value.adminId;
			} else if (checkRole("employees")) {
				userForm.employeeId = info.value.employeeId;
			} else if (checkRole("owners")) {
				userForm.ownerId = info.value.ownerId;
			}
		}
		ElMessage.success("获取成功");
	}
};

const dialogFormVisible = ref(false);

const userForm = reactive<IModuleUserInfo>({
	username: "",
	password: "",
	realName: "",
	gender: 1,
	email: "",
	phoneNumber: "",
	adminId: 0,
	imageUrl: "",
});

const checkRole = (role: string): any => {
	return info.value.roles?.includes(role);
};

const editAction = () => {
	let requestFunc: any = "";
	if (checkRole("admin")) {
		requestFunc = update;
	} else if (checkRole("employees")) {
		requestFunc = updateEmployees;
	} else if (checkRole("owners")) {
		requestFunc = updateOwners;
	}
	requestFunc(userForm).then(() => {
		ElMessage.success("修改成功");
		dialogFormVisible.value = false;
		getInfo();
	});
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
	if (rawFile.type !== "image/jpeg") {
		ElMessage.error("Avatar picture must be JPG format!");
		return false;
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error("Avatar picture size can not exceed 2MB!");
		return false;
	}
	return true;
};

const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
	userForm.imageUrl = URL.createObjectURL(uploadFile.raw!);
};
</script>
<template>
  <el-card shadow="never">
    <div style="display: flex;align-items: center; justify-content: space-between;">
      <h3>用户信息</h3>
      <el-button type="primary" @click="dialogFormVisible = true">编辑</el-button>
    </div>
    <el-row>
      <el-avatar shape="square" :size="100" fit="cover" :src="info.imageUrl" />
    </el-row>
    <el-row :gutter="24">
      <el-col :sm="24" :md="12" :lg="8">
        <span class="cell">用户名：{{ info.username }}</span>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8">
        <span class="cell">密码：{{ info.password }}</span>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8">
        <span class="cell">姓名：{{ info.realName }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :sm="24" :md="12" :lg="8">
        <span class="cell">性别：{{ info.gender == 1 ? "男" : "女" }}</span>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8">
        <span class="cell">邮箱：{{ info.email }}</span>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8">
        <span class="cell">联系方式：{{ info.phoneNumber }}</span>
      </el-col>
    </el-row>
    <el-divider></el-divider>

    <el-dialog v-model="dialogFormVisible" title="修改用户信息" width="500">
      <el-form :model="userForm" :label-width="80">
        <el-upload class="avatar-uploader" action="http://127.0.0.1:8080/admin/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="userForm.imageUrl" :src="userForm.imageUrl" class="avatar" style="width: 100px; height: 100px;" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>

        <el-form-item label="用户名">
          <el-input v-model="userForm.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userForm.password" show-password />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="userForm.realName" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="userForm.gender">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.email" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="userForm.phoneNumber" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editAction">确定</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </el-card>
</template>
<style scoped lang="scss">
.cell {
	line-height: 30px;
}

.status {
	padding-left: 20px;

	/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
	::v-deep(.el-badge__content.is-fixed.is-dot) {
		top: 12px;
		left: -8px;
	}
}
.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
